<template>
  <view class="order-layout">
    <my-header title="开盒记录"></my-header>
    <my-content class="content">
      <view class="box">
        <view class="box_item item-bg" v-for="item in orderData" :key="item.id">
          <view class="box_header">
            <view class="box_name">{{ item.blind_box_name }}</view>
            <view class="time">{{ item.created_at }}</view>
          </view>
          <view class="box_prizes">
            <view class="box_prize" :class="'box_prize_' + prize.level_id" v-for="prize in item.blind_box_order_prize_log"
              :key="prize.id">
              <image mode="aspectFit" class="box_prize_image" :src="prize.blind_box_prize_image"></image>
              <view class="num">x{{ prize.num }}</view>
            </view>
          </view>
          <view class="bottom">
            <view class="next btn-primary" @click="header(`/pages/index/detail?id=${item.blind_box_id}`)">再来一发</view>
          </view>
        </view>
      </view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'
export default {
  mixins: [box],
  data() {
    return {
      orderData: [],
      page: 1,
      last_page: 1,
      searchDay: '选中日期',
    }
  },
  onLoad() {
    this.getData(1)
  },
  onShow() { },
  onReachBottom() {
    if (this.page > this.lastPage) {
      this.show('已经到底了')
      return
    }
    this.getData(1)
  },
  methods: {
    splitNum(num) {
      return num.split('.')
    },
    selectDay(e) {
      console.log(e)
    },
    getData(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.blindBoxOrders
        .index({ page: this.page })
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            if (type == 1) {
              this.orderData = this.orderData.concat(res.data.data)
            } else if (type == 2) {
              this.orderData = res.data.data
            }
            this.page++
            this.last_page = res.data.last_page
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.order-layout {
  /* height: 100vh; */
  background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100% / 100%;
  min-height: 100vh;
}

.content {

  /* height: 100vh; */
  .box {
    /* overflow-y: scroll; */
    display: flex;
    flex-direction: column;

    .box_item {
      display: flex;
      flex-direction: column;
      width: 720rpx;
      margin: 20rpx auto 20rpx auto;
      padding-bottom: 20rpx;
      background-image: url('https://www.dingxians.cn/upload/images/user/bg-history-item.png');
      background-size: 100% 100%;

      .box_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 20rpx;

        .box_name {
          margin-left: 20rpx;
          color: white;
          font-size: 26rpx;
          font-weight: bold;
        }

        .time {
          font-size: 24rpx;
          color: white;
          opacity: 0.7;
          margin-right: 20rpx;
        }
      }

      .box_prizes {
        display: flex;
        /* flex-wrap: wrap; */
        overflow-x: scroll;
        margin: 0 40rpx;
        width: 638rpx;

        .box_prize {
          display: flex;
          width: 200rpx;
          height: 200rpx;
          flex-shrink: 0;
          /* box-sizing: border-box; */
          /* margin: 10rpx 10rpx 10rpx 20rpx; */
          // border: 1rpx solid #A361F6;
          /* padding: 10rpx 0; */
          position: relative;
            background: rgba(0, 0, 0, 0.37);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
          background-size: 100% 100%;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;

          &.box_prize_1 {
            border: 1rpx solid #45F5FF;
          }
          &.box_prize_2 {
            border: 1rpx solid #4DA7FB;
          }
          &.box_prize_3 {
            border: 1rpx solid #C650EE;
          }
          &.box_prize_4 {
            border: 1rpx solid #FEE557;
          }

          .goods_level {
            position: absolute;
            left: 10rpx;
            top: 10rpx;
            width: 71rpx;
            height: 28rpx;
            line-height: 28rpx;
            background-size: 100% 100%;
            font-size: 16rpx;
            color: white;
            box-sizing: border-box;
            padding-left: 28rpx;
            z-index: 33;
          }

          .box_prize_image {
            width: 160rpx;
            height: 160rpx;
          }

          .num {
            color: white;
            position: absolute;
            right: 20rpx;
            bottom: 20rpx;
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: flex-end;

        .next {
          width: 150rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          margin-right: 20rpx;
          margin-top: 20rpx;
          color: white;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
